<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>导航栏</title>
    <!-- 引用jQuery -->
    <script src="../../js/jQuery3.7.1.js"></script>
    <!-- 引入bootstrap -->
    <link rel="stylesheet" href="../../css/bootstrap.css" />
    <link rel="stylesheet" href="../../css/head.css" />
    <script src="../../js/bootstrap.js"></script>
  </head>
  <body>
    <!-- 大标题 -->
    <div class="container-fluid dbj">
      <!-- 导航栏 -->
      <nav class="navbar navbar-default dhl">
        <!-- logo -->
        <a class="navbar-brand" href="#">
          <img alt="logo" src="../../images/index/logo.png" class="logo"
        /></a>
        <div class="container-fluid dhl1">
          <div class="navbar-header">
            <button
              type="button"
              class="navbar-toggle collapsed"
              data-toggle="collapse"
              data-target="#bs-example-navbar-collapse-1"
              aria-expanded="false"
            >
              <span class="sr-only">切换导航</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"
              ><span class="grzx glyphicon glyphicon-user">个人中心</span></a
            >
          </div>

          <!-- 收集导航链接、表单和其他内容以进行切换-->
          <div
            class="collapse navbar-collapse bc"
            id="bs-example-navbar-collapse-1"
          >
            <ul class="nav navbar-nav">
              <li class="active">
                <a href="#" class="active1"
                  ><span class="glyphicon glyphicon-envelope">我的邮箱</span></a
                >
              </li>
              <li>
                <a href="#"
                  ><span class="glyphicon glyphicon-calendar">日志</span></a
                >
              </li>
              <li>
                <a href="#"><span class="glyphicon glyphicon-calendar">我的权限</span></a>
              </li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" />
              </div>
              <button type="submit" class="btn btn-default bt-color">
                <span class="glyphicon glyphicon-search fdj"></span>
              </button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">退出</a></li>
              <li>
                <a href="#"><span class="glyphicon glyphicon-cog"></span></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
  </body>
</html>
